// Import defaults
@import "../../bower_components/primer-css/scss/variables"
@import "../../bower_components/primer-css/scss/mixins"

// My overrides & variables
@import "variables"

// Import base and used components
@import "../../bower_components/primer-css/scss/normalize"
@import "../../bower_components/primer-css/scss/base"
@import "../../bower_components/primer-css/scss/type"
@import "../../bower_components/primer-css/scss/layout"
@import "../../bower_components/primer-css/scss/forms"
@import "../../bower_components/primer-css/scss/utility"
@import "../../bower_components/primer-css/scss/buttons"

html, body
  height: 100%

.header
  padding: 50px 15px 0
  text-align: center
  border-bottom: 6px solid $blue-green
  position: relative
  height: auto

  @media(min-width: 520px)
    padding: 150px 0 0

.overlay
  background: url(../images/congruent_pentagon.png) top left repeat
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  opacity: 0.3
  background-attachment: fixed

.content
  position: relative

.gradient
  background: #00b7ea; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #00b7ea 0%, #8ca246 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#00b7ea), color-stop(100%,#8ca246)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg,  #00b7ea 0%,#8ca246 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg,  #00b7ea 0%,#8ca246 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg,  #00b7ea 0%,#8ca246 100%); /* IE10+ */
  background: linear-gradient(135deg,  #00b7ea 0%,#8ca246 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#8ca246',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  background-attachment: fixed

.title
  color: #FFF
  font-size: 40px
  letter-spacing: -1px

  @media(min-width: 520px)
    font-size: 64px

.subtitle
  color: $blue-green
  font-size: 20px

  @media(min-width: 520px)
    font-size: 28px

.versions
  color: lighten($blue-green, 5%)

.btn-show-magic, .btn-show-magic:active, .btn-show-magic:focus
  margin-top: 30px
  padding: 18px 20px
  font-size: 18px
  line-height: 28px
  border-color: #FFF
  background: transparent
  color: #FFF
  transition: all 0.3s ease-in-out

  @media(min-width: 520px)
    margin-top: 50px
    padding: 18px 30px
    font-size: 24px
    line-height: 32px

  &:hover
    border-color: $blue-green
    color: #FFF
    background-color: $blue-green
    box-shadow: none

    &:focus
      border-color: $blue-green

.width-warning
  display: block
  font-size: 12px
  margin: 10px 0
  color: #9e0000

  @media(min-width: 520px)
    display: none

.more-magic
  display: block
  color: #FFF
  margin-top: 5px
  color: $blue-green

.github-buttons
  margin-top: 20px
  padding: 20px 0

  @media(min-width: 520px)
    margin-top: 70px

  iframe
    margin: 0 10px

.wrapper
  width: 90%;
  margin: 20px auto 0
  position: relative

  @media(min-width: 520px)
    width: auto
    max-width: 520px
    margin: 40px auto 0


h2
  color: $blue-green

a
  color: $blue-green
  font-weight: bold

.hide
  display: none !important

.footer
  color: #FFF
  text-align: center
  padding: 20px 0
  position: relative
